<template>
  <div>
     <div>
       <el-divider content-position="left">
         <b style="color: #67C23A">延时渠道区域拦截配置模块</b>
       </el-divider>

       <el-form :model="queryParams" ref="queryXYForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
         <el-form-item label="省份名称" prop="name">
           <el-input
             v-model="queryParams.province"
             placeholder="请输入商品名称"
             clearable
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>

         <el-form-item>
           <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-form>

       <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
           <el-button
             type="primary"
             plain
             icon="el-icon-plus"
             @click="handleAdd"
           >新增</el-button>
         </el-col>
       </el-row>


       <el-table v-loading="loading" :data="tableData" :row-class-name="tableRowClassName">>
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="省份" align="center" prop="province"/>
         <el-table-column label="创建时间" align="center" prop="creatTime"/>
         <el-table-column label="区号" align="center" prop="areaCode" />
         <el-table-column label="区域名称" align="center" prop="areaName" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
<!--             <el-button-->
<!--               type="success" plain-->
<!--               icon="el-icon-edit"-->
<!--               @click="handleUpdate(scope.row)"-->
<!--             >修改</el-button>-->
             <el-button
               type="danger" plain
               icon="el-icon-delete"
               @click="handleDelete(scope.row)"
             >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
       <pagination
         v-show="total>0"
         :total="total"
         :page.sync="queryParams.current"
         :limit.sync="queryParams.pageSize"
         @pagination="queryXYFrom"
       />

       <!-- 添加或修改平台账户对话框 -->
       <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
         <el-form    ref="dynamicValidateForm" :model="dynamicValidateForm"  label-width="100px" class="dynamic">
           <el-form-item label="省份名称" prop="name">
             <el-input v-model="dynamicValidateForm.province" placeholder="请输入省份名称" />
           </el-form-item>
           <el-form-item
             v-for="(domain, index) in dynamicValidateForm.regions"
             :label="'区域' + index"
             :key="domain.key"
             :prop="'regions.' + index + '.areaCode'"
             :rules="{
              required: true, message: '区域参数不能为空', trigger: 'blur'
            }"
           >
             <el-input v-model="domain.areaCode" placeholder="请输入区号"></el-input>
             <div style="margin: 10px 0;"></div>
             <el-input v-model="domain.areaName" placeholder="请输入区名称"></el-input>
             <div style="margin: 10px 0;"></div>
             <el-button @click.prevent="removeDomain(domain)"  type="warning" plain>删除</el-button>
           </el-form-item>

           <el-form-item>
             <el-button @click="addDomain" type="success" plain>新增区域</el-button>
           </el-form-item>

         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button type="primary"  @click="submitForm('dynamicValidateForm')">提交</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </el-dialog>

     </div>




  </div>
</template>
<script>
import axios from 'axios'
export default {

    created() {
      this.queryXYFrom();
    },

  data() {
    return {
          dynamicValidateForm: {
            regions: [{
              areaCode: '',
              areaName:''
            }],
            province: ''
          },
          // 遮罩层
          loading: true,
          // 是否显示弹出层
          open: false,
          tableData: [],
          total: 0,
          queryParams:{
            current: 1,
            pageSize: 10,
            province:null,
          },
          // 显示搜索条件
          showSearch: true,
          title: "",

    };
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  methods: {

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {//校验通过
          this.loading = true;
          axios.post('http://47.110.49.47:8071/meituan-waimai-order/addInterceptList', this.dynamicValidateForm)
            .then(res => {
              if (res.data.code === "200"){
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.queryXYFrom();
              }else {
                this.$modal.msgError(res.data.message)
                this.open = false;
                this.queryXYFrom();
              }
              this.loading = false;
              // 根据需要处理响应数据
            }).catch(res=>{
            this.$modal.msgError("添加失败")
            this.open = false;
            this.queryXYFrom();
          })
        } else {//校验未通过
          this.$modal.msgError("参数缺失")
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.regions.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.regions.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.regions.push({
        value: '',
        key: Date.now()
      });
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.title = "添加过滤区域";
    },


    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id || this.ids;
      this.$modal.confirm('是否确认删除？').then(res => {
        axios.get('http://47.110.49.47:8071/meituan-waimai-order/delIntercept/'+ id).then(res =>{
          if (res.data.code === "200"){
            this.queryXYFrom();
            this.$modal.msgSuccess("删除成功");
          }else {
            this.queryXYFrom();
            this.$modal.msgError("删除失败！")
            this.open = false;
          }
        }).catch(err=>{
          this.queryXYFrom();
          this.$modal.msgError("删除失败！")
          this.open = false;
        })
      }).catch(() => {
        this.$modal.msgError("已取消！")
        this.open = false;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
    },


    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryXYFrom();
    },
    resetQuery() {
      this.xyForm("queryXYForm");
      this.queryXYFrom();
    },
    queryXYFrom(){
      this.loading = true;
      axios.post('http://47.110.49.47:8071/meituan-waimai-order/queryInterceptList', this.queryParams)
        .then(res => {
          if (res.data.code === "200"){
            console.log(res.data.encryptData)
            this.tableData = res.data.encryptData.data;
            this.total = res.data.encryptData.total;
          }
          this.loading = false;
          // 根据需要处理响应数据
        })
    },

    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2 === 1) {
        return 'success-row';
      }
      return '';
    },

    xyForm(){
      this.queryParams.province = '';
      this.$refs.queryXYForm.resetFields();
    }
  }
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
